<template>
	<view class="frame">
		<view class="frame">
			<view class="top_nav_box">
				<navigation-custom :config="config" />
			</view>
			<view class="content_hadrimg">
				<image :src="imgUrl+'imasdafaasda.png'" mode="aspectFill"></image>
				<view class="such_view">
					<view class="such_view_flex">
						<image src="https://app.meixuexiaoyuan.com/appimage/youxin/such.png" mode="" class="such"></image>
						<view class="such_input_view">
							<input type="text" placeholder="搜索内容" placeholder-class="suchewei" class="sucheyi" v-model="such"
								@confirm="getsuch" />
						</view>
						<view class="such_button" @click="getsuch()">
							搜索
						</view>
					</view>
				</view>
				<view class="asdaajadad">
					<x-skeleton type="list" :loading="loading" :configs="configs">
						<view v-for="(item,index) in cayunList" :key="index" class="xuedsipdf" @click="getyulabn(item.content)">
							<view class="aasf_row">
								<lazyLoad :src="item.image" width="176rpx" height="132rpx"
									borderRadius='16rpx' style="margin-left: 24rpx;"></lazyLoad>
								<view class="asdaf_cloum">
									<view class="asdaf_nasdm">
										{{item.title}}
									</view>
									<view class="asdaf_nasadm">
										{{item.desc}}
									</view>
								</view>
							</view>
							<view class="asasfasda">
								<image :src="imgUrl+'dianiuuuipan.png'" mode="aspectFill" class="yuuondaad"></image>
							</view>
						</view>
						<view class="lisrsimages" v-if="cayunList.length == 0">
								<image :src="imgUrl+'zanwueasda.png'" mode="widthFix"></image>
							<text>暂无内容</text>
						</view>
						<view class="bolck"></view>
					</x-skeleton>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom";
	import lazyLoad from '@/components/muqian-lazyLoad/muqian-lazyLoad.vue';
	export default {
		components: {
			navigationCustom,
			lazyLoad
		},
		data() {
			return {
				config: {
					title: "学习园地", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
				},
				imgUrl: config.imgUrl,
				page:1,
				cayunList:[],
				loading: true,
				configs: {
					gridRows: 5,
				},
				such:''
			}
		},
		onPullDownRefresh() {
			var that = this
			that.page = 1,
			that.cayunList = []
			that.getranking()
		},
		onReachBottom() {
			var that = this
			that.page++;
			that.getranking()
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 40) {
				a.config.bgcolor = 'rgba(249, 65, 65,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(249, 65, 65,0.2)'
				a.config.menuIcon = ''
				a.config.title = '学习园地'
				a.config.fontcolor = '#fff'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(249, 65, 65, 0.4)'
				a.config.menuIcon = ''
				a.config.title = '学习园地'
				a.config.fontcolor = '#fff'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(249, 65, 65, 1)'
				a.config.menuIcon = ''
				a.config.title = '学习园地'
				a.config.fontcolor = '#fff'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(249, 65, 65, 0)'
				a.config.menuIcon = ''
				a.config.title = '学习园地'
				a.config.fontcolor = '#fff'
			}
		},
		onLoad() {
			this.getranking()
		},
		methods: {
			getsuch(){
				var that = this
				that.page = 1,
				that.cayunList = []
				that.getranking()
			},
			//查询文件
			async getranking(){
				var that = this;
				let data = await that.$api.getstudy({
					page: that.page,
					key:that.such
				});
				uni.stopPullDownRefresh()
				if (data.code == 1) {
					that.loading = false
					that.cayunList = [...that.cayunList, ...data.data.data]
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
				}
			},
			getyulabn(url){
				var that = this
				uni.showLoading({
					title: '预览中...',
					mask: true,
				});
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								uni.hideLoading();
								console.log('打开文档成功');
							}
						});
					},
				
				});
			}
		}
	}
</script>

<style lang="scss">
	.frame {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #F5F7FB !important;

		.top_nav_box {
			top: 0;
			left: 0;
			z-index: 99;
		}

		.content_hadrimg {
			width: 750rpx;
			height: 510rpx; 
			position: absolute;
			top: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
	.such_view {
		width: 750rpx;
		height: 88rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
		position: relative;
		margin-top: -300rpx;
	
		.such_view_flex {
			width: 694rpx;
			height: 64rpx;
			border: 2rpx solid #FFFFFF;
			background: #FFFFFF;
			border-radius: 200rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			padding-left: 24rpx;
	
			.such {
				width: 32rpx;
				height: 32rpx;
			}
	
			.such_input_view {
				width: 513rpx;
				margin-left: 8rpx;
			}
	
			.suchewei {
				font-weight: 400;
				font-size: 28rpx;
				color: #909399;
			}
	
			.sucheyi {
				font-weight: 400;
				font-size: 28rpx;
				color: #303133;
			}
	
			.such_button {
				width: 120rpx;
				height: 56rpx;
				border-radius: 200rpx;
				background-color: #F94141;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: 400;
				margin-left: 20rpx;
			}
		}
	}
	
	.asdaajadad{
		width: 100%;
		background-color: #F5F7FB !important;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-top: 36rpx;
		box-sizing: border-box;
		position: relative;
		margin-top: 36rpx;
	}
	.xuedsipdf{
		width: 702rpx;
		height: 236rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 0.75);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		.asasfasda{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			margin-top: 20rpx;
			.yuuondaad{
				width: 236rpx;
				height: 64rpx;
			}
		}
	
	}
	.aasf_row{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 24rpx;
		.back{
			width: 176rpx;
			height: 132rpx;
			border-radius: 16rpx;
			margin-left: 24rpx;
		}
		.asdaf_cloum{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-left: 20rpx;
			.asdaf_nasdm{
				width: 450rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #08112C;
				display: -webkit-box;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
			.asdaf_nasadm{
				width: 450rpx;
				font-size: 26rpx;
				color: #7C849C;
				display: -webkit-box;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin-top: 16rpx;
			}
		}
	}
	.lisrsimages {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		margin-top: 300rpx;
	}
	
	.lisrsimages image {
		width: 240rpx;
		height: 240rpx;
	}
	
	.lisrsimages text {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-style: normal;
		font-weight: bold;
		font-size: 32rpx;
		line-height: 48rpx;
		letter-spacing: 0.04em;
		color: #606266;
		margin-top: 24.16rpx;
	}
</style>